import React, { useState, useEffect } from 'react';
import { ArrowLeft, File, Folder, Search, Settings, GitBranch, Play, Square, RotateCcw } from 'lucide-react';
import { useAppStore } from '../stores/appStore';

const DisguisePage: React.FC = () => {
  const { setCurrentMode } = useAppStore();
  const [currentTime, setCurrentTime] = useState(new Date());
  const [activeFile, setActiveFile] = useState('App.tsx');
  const [terminalOutput] = useState<string[]>([
    '$ npm run dev',
    '> vite',
    '',
    '  VITE v5.0.0  ready in 234 ms',
    '',
    '  ➜  Local:   http://localhost:5173/',
    '  ➜  Network: use --host to expose',
    '  ➜  press h to show help'
  ]);

  // 更新时间
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  // 模拟终端输出
  // const addTerminalOutput = (output: string) => {
  //   setTerminalOutput(prev => [...prev, output]);
  // };

  // 文件树数据
  const fileTree = [
    { name: 'src', type: 'folder', expanded: true, children: [
      { name: 'components', type: 'folder', expanded: false, children: [
        { name: 'Header.tsx', type: 'file' },
        { name: 'Sidebar.tsx', type: 'file' },
        { name: 'Button.tsx', type: 'file' }
      ]},
      { name: 'pages', type: 'folder', expanded: true, children: [
        { name: 'Home.tsx', type: 'file' },
        { name: 'About.tsx', type: 'file' },
        { name: 'Contact.tsx', type: 'file' }
      ]},
      { name: 'utils', type: 'folder', expanded: false, children: [
        { name: 'helpers.ts', type: 'file' },
        { name: 'constants.ts', type: 'file' }
      ]},
      { name: 'App.tsx', type: 'file' },
      { name: 'main.tsx', type: 'file' },
      { name: 'index.css', type: 'file' }
    ]},
    { name: 'public', type: 'folder', expanded: false, children: [
      { name: 'vite.svg', type: 'file' },
      { name: 'favicon.ico', type: 'file' }
    ]},
    { name: 'package.json', type: 'file' },
    { name: 'vite.config.ts', type: 'file' },
    { name: 'tsconfig.json', type: 'file' },
    { name: 'README.md', type: 'file' }
  ];

  // 代码内容
  const codeContent = `import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import './App.css';

function App() {
  return (
    <Router>
      <div className="app">
        <Header />
        <div className="app-body">
          <Sidebar />
          <main className="main-content">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/about" element={<About />} />
              <Route path="/contact" element={<Contact />} />
            </Routes>
          </main>
        </div>
      </div>
    </Router>
  );
}

export default App;`;

  // 渲染文件树
  const renderFileTree = (items: any[], level = 0) => {
    return items.map((item, index) => (
      <div key={index} style={{ marginLeft: `${level * 16}px` }}>
        <div 
          className={`flex items-center py-1 px-2 hover:bg-gray-700 cursor-pointer text-sm ${
            item.name === activeFile ? 'bg-gray-600' : ''
          }`}
          onClick={() => item.type === 'file' && setActiveFile(item.name)}
        >
          {item.type === 'folder' ? (
            <Folder size={16} className="mr-2 text-blue-400" />
          ) : (
            <File size={16} className="mr-2 text-gray-400" />
          )}
          <span className="text-gray-200">{item.name}</span>
        </div>
        {item.children && item.expanded && (
          <div>
            {renderFileTree(item.children, level + 1)}
          </div>
        )}
      </div>
    ));
  };

  return (
    <div className="w-full h-screen bg-gray-900 text-white flex flex-col">
      {/* VS Code 顶部菜单栏 */}
      <div className="bg-gray-800 border-b border-gray-700 px-4 py-2">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <button
              onClick={() => setCurrentMode('reading')}
              className="flex items-center space-x-2 text-gray-300 hover:text-white transition-colors"
            >
              <ArrowLeft size={16} />
              <span className="text-sm">退出伪装</span>
            </button>
            <div className="flex items-center space-x-4 text-sm text-gray-300">
              <span>文件</span>
              <span>编辑</span>
              <span>选择</span>
              <span>查看</span>
              <span>转到</span>
              <span>运行</span>
              <span>终端</span>
              <span>帮助</span>
            </div>
          </div>
          
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2 text-sm text-gray-400">
              <GitBranch size={14} />
              <span>main</span>
            </div>
            <div className="text-sm text-gray-400">
              {currentTime.toLocaleTimeString()}
            </div>
          </div>
        </div>
      </div>

      {/* 工具栏 */}
      <div className="bg-gray-800 border-b border-gray-700 px-4 py-2">
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <button className="p-1 hover:bg-gray-700 rounded">
              <Play size={16} className="text-green-400" />
            </button>
            <button className="p-1 hover:bg-gray-700 rounded">
              <Square size={16} className="text-red-400" />
            </button>
            <button className="p-1 hover:bg-gray-700 rounded">
              <RotateCcw size={16} className="text-blue-400" />
            </button>
          </div>
          
          <div className="flex-1 max-w-md">
            <div className="relative">
              <Search size={16} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder="搜索文件..."
                className="w-full pl-10 pr-4 py-1 bg-gray-700 border border-gray-600 rounded text-sm text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
              />
            </div>
          </div>
        </div>
      </div>

      <div className="flex flex-1 overflow-hidden">
        {/* 侧边栏 */}
        <div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
          {/* 资源管理器 */}
          <div className="p-3 border-b border-gray-700">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium text-gray-200">资源管理器</span>
              <Settings size={14} className="text-gray-400" />
            </div>
            <div className="text-xs text-gray-400 mb-2">REACT-PROJECT</div>
            <div className="max-h-96 overflow-y-auto">
              {renderFileTree(fileTree)}
            </div>
          </div>
          
          {/* Git 状态 */}
          <div className="p-3 border-b border-gray-700">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium text-gray-200">源代码管理</span>
              <GitBranch size={14} className="text-gray-400" />
            </div>
            <div className="text-xs text-gray-400 space-y-1">
              <div className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                <span>3 个更改</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
                <span>1 个暂存</span>
              </div>
            </div>
          </div>
        </div>

        {/* 主编辑区域 */}
        <div className="flex-1 flex flex-col">
          {/* 标签栏 */}
          <div className="bg-gray-800 border-b border-gray-700">
            <div className="flex items-center">
              <div className="flex items-center px-4 py-2 bg-gray-700 border-r border-gray-600">
                <File size={14} className="mr-2 text-blue-400" />
                <span className="text-sm text-white">{activeFile}</span>
                <button className="ml-2 text-gray-400 hover:text-white">
                  ×
                </button>
              </div>
              <div className="flex items-center px-4 py-2 border-r border-gray-600">
                <File size={14} className="mr-2 text-gray-400" />
                <span className="text-sm text-gray-400">package.json</span>
              </div>
            </div>
          </div>

          {/* 代码编辑器 */}
          <div className="flex-1 bg-gray-900 p-4 overflow-auto">
            <div className="font-mono text-sm">
              {codeContent.split('\n').map((line, index) => (
                <div key={index} className="flex">
                  <span className="w-12 text-gray-500 text-right pr-4 select-none">
                    {index + 1}
                  </span>
                  <span className="text-gray-200">
                    {line.includes('import') && (
                      <span className="text-purple-400">{line}</span>
                    )}
                    {line.includes('function') && (
                      <span className="text-blue-400">{line}</span>
                    )}
                    {line.includes('return') && (
                      <span className="text-yellow-400">{line}</span>
                    )}
                    {!line.includes('import') && !line.includes('function') && !line.includes('return') && (
                      <span>{line}</span>
                    )}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* 底部终端 */}
          <div className="h-48 bg-black border-t border-gray-700">
            <div className="bg-gray-800 px-4 py-2 border-b border-gray-700">
              <div className="flex items-center space-x-4">
                <span className="text-sm text-white">终端</span>
                <span className="text-sm text-gray-400">问题</span>
                <span className="text-sm text-gray-400">输出</span>
                <span className="text-sm text-gray-400">调试控制台</span>
              </div>
            </div>
            <div className="p-4 font-mono text-sm text-green-400 overflow-y-auto h-40">
              {terminalOutput.map((line, index) => (
                <div key={index}>{line}</div>
              ))}
              <div className="flex items-center">
                <span className="text-blue-400">$</span>
                <span className="ml-2 bg-gray-700 w-2 h-4 animate-pulse"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 状态栏 */}
      <div className="bg-blue-600 px-4 py-1">
        <div className="flex items-center justify-between text-sm text-white">
          <div className="flex items-center space-x-4">
            <span>UTF-8</span>
            <span>LF</span>
            <span>TypeScript React</span>
            <span>Prettier</span>
          </div>
          <div className="flex items-center space-x-4">
            <span>Ln 12, Col 25</span>
            <span>空格: 2</span>
            <span>已连接</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DisguisePage;